<template>
    <div>
        图形页面
    </div>
    <!-- <div ref="ref1" class="e-root"></div> -->
    <!-- 饼图 -->
    <Pie :data="PieData" />
    <!-- <Pie2 :data="PieData" /> -->
    <Map :data="MapData" />
</template>

<script setup lang="ts">
import Pie from './components/Pie.vue'
import Map from './components/Map.vue'
// import Pie2 from './components/Pie2.vue'
import { getHomeDataApi } from '@/api'
import { ref } from 'vue'
// import * as Echarts from 'echarts'
// echarts 的使用步骤：
// 1.安装  npm i echarts
// 2.准备一个基本的容器 ,容器需要宽高
// 3.准备一个画图需要的配置
// 4.初始化图形


// const ref1 = ref();
// onMounted(() => {
//     console.log(ref1.value)

//     // echarts必须的配置对象
//     const option = {
//         title: {                        // 标题
//             text: '柱状图示例',
//             textStyle: {
//                 fontWeight: 'normal',
//                 fontSize: 20
//             }
//         },
//         tooltip: {                      // 提示框组件
//             trigger: 'axis'
//         },
//         xAxis: {                        // x 轴
//             data: ['产品 A', '产品 B', '产品 C', '产品 D', '产品 E'],
//             axisLabel: {
//                 show: true,
//                 textStyle: {
//                     fontSize: 50
//                 }
//             }
//         },
//         yAxis: {                        // y 轴
//             axisLabel: {
//                 show: true,
//                 textStyle: {
//                     fontSize: 14
//                 }
//             }
//         },
//         series: [{                      // 数据系列
//             name: '销量',               // 系列名称
//             type: 'bar',                // 系列类型为柱状图
//             data: [200, 300, 600, 800, 1000],   // 数据
//             itemStyle: {                // 柱状图 item 的样式
//                 normal: {
//                     color: '#0094ff',
//                     opacity: 0.9
//                 }
//             }
//         }]
//     };

//     // 初始化 , 得到一个 图像的实例
//     const example = Echarts.init(ref1.value)
//     // 并且调用 实例对象的 setOption方法，用来创建图像
//     example.setOption(option)
// })


let PieData = ref<SalePie[]>([]);
let MapData = ref<SaleMap[]>([]);

// 一开始发请求获取饼图和地图的数据
getHomeDataApi().then(res => {
    PieData.value = res.data.salePie;
    MapData.value = res.data.saleMap;
})

</script>

<style lang="less" scoped>
.e-root {
    width: 100%;
    height: 400px;
}
</style>